import React, {Component} from 'react';
import "./index.css"
class Footer extends Component {

    handleCheckAll = (e) => {
        // const {todos,checkAllTodo} = this.props
        this.props.checkAllTodo(e.target.checked)
    }

    handleClearAll = () => {
        // const {clearAllTodo} = this.props
        if(window.confirm("确定要删除吗？")){
            this.props.clear()
        }

    }
    render() {
        const {todos,clear} = this.props
        // 计算总任务数和完成的任务数
        const total = todos.length;
        // const doneTotal = todos.filter(todo => todo.completed).length;
        const doneTotal = todos.reduce((pre,todo) => pre + (todo.completed ? 1 : 0),0);
        return (
            <div className="todo-footer">
                <label>
                    <input onChange={this.handleCheckAll} type="checkbox" checked={doneTotal === total ? true :false}/>
                </label>
                <span>
                    <span>已完成{doneTotal}</span> / 全部{total}
                </span>
                <button className="btn btn-danger" onClick={this.handleClearAll}>清除已完成任务</button>
            </div>
        );
    }
}

export default Footer;